:root {
  // van 变量
  --van-field-placeholder-text-color: rgb(85, 101, 126);

  --van-button-default-height: 40px;
  // 徽标
  --van-badge-background: var(--fog-6);
  --van-badge-border-width: 0;
  --van-badge-font-weight: 100;
  --van-badge-font-size: 10px;
  --van-badge-padding: 2px 3px;
  // // 步骤条
  // --van-steps-background: transparent;
  // --van-step-font-size: 28px;

  // --van-button-radius: 20px;

  // dialog
  --van-dialog-width: 375px;

  // 自定义变量
  // 背景色
  --fog-1: #2e3035;
  --fog-2: #0d131c;
  --fog-3: #111923;
  --fog-4: #161f2c;
  --fog-5: conic-gradient(from 1turn, #58af10, #1d803a);
  --fog-6: #3bc117;
  --fog-7: #3d4049;
  --fog-8: #24262a;
  --fog-9: #24262b;
  --fog-10: #1e2024;
  --fog-11: linear-gradient(
    to top,
    rgba(59, 193, 23, 0.15),
    rgba(59, 193, 23, 0) 60%
  );
  --fog-12: #17181b;
  --fog-13: #1a1c20;
  --fog-14: #17191b;
  --fog-15: linear-gradient(82.85deg, #2d2920 -0.8%, #705f4b 103.54%);
  --fog-16: #e1b49a;
  --fog-17: #2b292d;
  --fog-18: #2d3035;
  --fog-19: #e09a6a;
  --fog-20: linear-gradient(0deg, #1f2124, #1f2124),
    linear-gradient(0deg, #2a2e33, #2a2e33);
  --fog-21: #32343b;
  --fog-22: #979797;
  --fog-23: #ffffff;
  --fog-24: #45d91e;
  --fog-25: #45d91e4d;
  --fog-26: linear-gradient(to bottom, transparent, #2e3035);
  --fog-27: #1c1e22;
  --fog-28: #373c48;
  --fog-29: radial-gradient(
      73.96% 233.94% at 17.29% 33.33%,
      rgba(83, 0, 171, 0) 28.09%,
      rgba(67, 0, 138, 0.6) 100%
    ),
    linear-gradient(0deg, #9d4af5, #9d4af5);
  --fog-30: #191b1e;
  --fog-31: #31343c;

  --fog-32: #3ac9481a;
  --fog-33: #98a7b51a;
  --fog-34: #3bc1171a;
  --fog-35: #17181b80;
  --fog-36: #2a2e33;
  --fog-37: #202327;
  --fog-38: linear-gradient(180deg, #ffffff 0%, #edc7a7 100%);
  --fog-39: #98a7b5;
  --fog-40: #333333;
  --fog-41: #ba1a1a;
  --fog-42: #fbbc36;
  --fog-43: #31343c99;
  --fog-44: #222328;
  --fog-45: #1f2124;
  --fog-46: #18191d99;
  --fog-47: #17181b99;
  --fog-48: #2e3036;
  --fog-49: #5b5f6f;
  --fog-50: #24262c;
  --fog-51: #df4040;
  --fog-52: #191a1e;
  // 文字色
  --text-1: #1bb83d;
  --text-2: #93acd3;
  --text-3: #ffffff;
  --text-4: #98a7b5;
  --text-5: #3bc117;
  --text-6: #67707b;
  --text-7: #f5f6f7;
  --text-8: #99a4b080;
  --text-9: #edc7a7;
  --text-10: #ffffff4d;
  --text-11: #999ca0;
  --text-12: #ba1a1a;
  --text-13: #fbbc36;
  --text-14: #99a4b099;
  --text-15: #ec4016;
  --text-16: #9ba7b4;
  --text-17: #ed6300;
  --text-18: #f0be0b;
  --text-19: #5f6975cc;
  --text-20: #99a4b0cc;
  --text-21: #000000;
  // 边框
  --border-1: #1bb83d;
  --border-2: #98a7b5;
  --border-3: #484d57;
  --border-4: #25272c;
  --border-5: #3bc117;
  --border-6: #3c404a;
  --border-7: #565f70;
  --border-8: #434950;
  --border-9: #464646;
  --border-10: #40424b;
  // box-shadow
  --shadow-1: #00000040;
  --shadow-2: #3bc11726;
  --shadow-3: 0px 2px 0px rgba(0, 0, 0, 0.2);
}

html.van-theme-light {
  // --fog-1: #ffffff;
  // --fog-2: #ffffff;
  // --fog-3: #ffffff;
  // --fog-4: #ffffff;
  // --fog-5: #ffffff;
  // --fog-6: #ffffff;
  // --fog-7: #ffffff;
  // --fog-8: #f6f7fa;
  // --fog-9: #ffffff;
  // --fog-10: #ffffff;
  // --fog-11: #ffffff;
  // --fog-12: #ffffff;
  // --fog-13: #ffffff;
  // --fog-14: #ffffff;
  // --fog-15: #ffffff;
  // --fog-16: #ffffff;
  // --fog-17: #ffffff;
  // --fog-18: #ffffff;
  // --fog-19: #ffffff;
  // --fog-19: #ffffff;
  // --fog-20: #ffffff;
  // --fog-21: #ffffff;
  // --fog-22: #ffffff;
  // --fog-23: #ffffff;
  // --fog-24: #ffffff;
  // --fog-25: #ffffff;
  // --fog-26: #ffffff;
  // --fog-27: #ffffff;
  // --fog-28: #ffffff;
  // --fog-29: #ffffff;
  // --fog-30: #ffffff;

  // --text-1: #000000;
  // --text-2: #000000;
  // --text-3: #000000;
  // --text-4: #000000;
  // --text-5: #000000;
  // --text-6: #000000;
  // --text-7: #000000;

  // --border-1: #1bb83d;
  // --border-2: #98a7b5;
  // --border-3: #484d57;
  // --border-4: #25272c;
  // --border-5: #3bc117;

  // --shadow-1: #00000040;
}
* {
  transition: background-color 0.6s;
}

.van-field {
  height: 40px;
  background: var(--fog-13);
  border: none;
  font-weight: 400;
  margin-bottom: 12px;
  border-radius: 4px;
  &:-webkit-autofill {
    background-color: #f3f3f3; /* 设置自动填充背景色 */
  }
  &::after {
    display: none;
  }
  :deep(.van-field__body) {
    height: 100%;
    font-weight: 700;
    > .van-field__control {
      font-size: 13px;
      color: var(--text-3) !important;
      font-weight: 500;
      background-color: var(--fog-13) !important;
      &:-internal-autofill-selected {
        color: var(--text-3) !important;
        background-color: var(--fog-13) !important;
        box-shadow: inset 0 0 0 1000px var(--fog-13) !important;
        -webkit-text-fill-color: var(--text-3);
      }
      &::placeholder {
        color: #999;
      }
    }
  }
}

.van-swipe {
  .van-swipe__indicators {
    .van-swipe__indicator {
      transition: all 0.6s;

      background-color: var(--fog-22);
      &--active {
        background-color: var(--fog-23);
        width: 8px;
        border-radius: 4px;
      }
    }
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 0s ease-in-out 5000s, color 0s ease-in-out 5000s;
  -webkit-text-fill-color: var(--text-3);
  -webkit-text-size-adjust: 12px;
}
// 自定义类名
.bc-btn {
  background-color: var(--fog-6);
  color: var(--text-3);
  font-size: 12px;
  border: none;
  > svg {
    fill: var(--text-3);
  }
}

.bc-login-btn {
  width: 320px;
  height: 37.5px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px;
  border-radius: 4px;
  border: none;
  background: var(--fog-5);
}

.bc-border-bottom {
  border-bottom: 0.5px solid var(--border-3);
}
.bc-input {
  height: 40px;
  padding: 0 12px;
  background-color: transparent !important;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  width: 100%;
  color: var(--text-3);
  overflow: hidden;
  &:-internal-autofill-selected {
    box-shadow: inset 0 0 0 1000px var(--fog-13);
    -webkit-text-fill-color: var(--text-3);
    background-image: none;
  }
}

//
.icon {
  height: 18px;
  width: 18px;
  fill: var(--text-4);
}
.scrollbar-hidden {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@keyframes drawer-in {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  90% {
    transform: translateY(-5px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes drawer-out {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.drawer-in {
  animation-name: drawer-in;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.drawer-out {
  animation: drawer-out;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

// p {
//   margin: 0;
// }
